<script lang="ts" setup>
import { h, reactive, toRefs } from 'vue'
import { FormOutlined } from '@ant-design/icons-vue'
import to from '@/utils/awaitTo'
import { Api } from '@/api'

// 声明应用
const props = defineProps({
  row: {
    type: Object,
    default: () => {
    }
  }
})

// 响应式数据
const state = reactive({
  loading: false,
  open: false,
  form: {
    topicTitle: '话题标题',
    makingTemplatesName: '制作模板',
    chooseMusic: '随机',
    coverImg: {}, //封面样式
    charactersIntro: [], //人物介绍
    selectSubtitles: [], //字幕样式
    highlightImg: [], //重点高亮样式
    remarkAvatar: [], //备注图片
    subtitles: '人名条文字内容', //人名条文字内容
    remarkTest: '没有备注内容哦'
  }
})

// 响应式数据解析
const { loading, open, form } = toRefs(state)

// 点击事件
const handleDescripton = async (item) => {
  if (item && item.videoId) {
    const params = {
      videoIds: [item.videoId],
      voiceOrVideoOrProductionRequirement: 3
    }
    const [error, data] = await to(Api.video.videoVoiceInfo(params))
    if (!error) {
      const [info] = data;
      form.value = info.url.originalFilm;
      open.value = true;
    }
  }
}
</script>

<template>
  <div>
    <a-button :icon="h(FormOutlined)" :loading="loading" type="primary" @click="handleDescripton(row)">
      制作说明
    </a-button>
    <a-modal v-model:open="open" :footer="false" :maskClosable="true" :width="1000" title="制作说明">
      <a-page-header :title="form.topicTitle">
        <template #default>
          <a-descriptions :column="1">
            <a-descriptions-item label="合成视频">登录
              <a href="https://xiaowei.cloud.tencent.com/" target="_blank">https://xiaowei.cloud.tencent.com/
              </a>
              网站，的数字人与本平台的音频合成视频后，下载再制作
            </a-descriptions-item>
            <a-descriptions-item label="制作模板">
              {{ form.makingTemplatesName }}
            </a-descriptions-item>
            <a-descriptions-item label="背景音乐">
              <a-tag color="blue"> {{ form.chooseMusic }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="人名条文字内容">
              {{ form.subtitles }}
            </a-descriptions-item>
            <a-descriptions-item label="备注">
              {{ form.remarkTest }}
            </a-descriptions-item>
          </a-descriptions>
        </template>

        <template #footer>
          <a-tabs :destroyInactiveTabPane="true">
            <a-tab-pane key="1" tab="封面样式">
              <div class="m-2">{{ form.coverImg?.text }}</div>
              <a-image :src="form.coverImg?.img" :width="200" />
            </a-tab-pane>

            <a-tab-pane key="2" :disabled="!form.charactersIntro.length" tab="人物介绍样式">
              <div class="flex flex-wrap">
                <div v-for="(item,index) in form.charactersIntro" :key="index" class="flex flex-col items-center mr-3">
                  <div class="m-2">
                    {{ item.text }}
                  </div>
                  <a-image :src="item.img" :width="200" />
                </div>
              </div>
            </a-tab-pane>

            <a-tab-pane key="3" :disabled="!form.selectSubtitles.length" tab="字幕样式">
              <div class="flex flex-wrap">
                <div v-for="(item,index) in form.selectSubtitles" :key="index" class="flex flex-col items-center mr-3">
                  <div class="m-2">
                    {{ item.text }}
                  </div>
                  <a-image :src="item.img" :width="200" />
                </div>
              </div>
            </a-tab-pane>

            <a-tab-pane key="4" :disabled="!form.highlightImg.length" tab="重点高亮样式">
              <div class="flex flex-wrap">
                <div v-for="(item,index) in form.highlightImg" :key="index" class="flex flex-col items-center mr-3">
                  <div class="m-2">
                    {{ item.text }}
                  </div>
                  <a-image :src="item.img" :width="200" />
                </div>
              </div>
            </a-tab-pane>

            <a-tab-pane key="5" :disabled="!form.remarkAvatar.length" tab="备注图片">
              <div class="flex flex-wrap">
                <div v-for="(item,index) in form.remarkAvatar" :key="index" class="flex flex-col items-center mr-3">
                  <a-image :src="item" :width="200" />
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </template>

      </a-page-header>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>

</style>
